<template>
    <div>
        <!--    <h1 style="font-family: 微软雅黑;font-weight: bold">欢迎来到ICT通信双创工作室</h1>-->
        <div>
            <el-row>
                <el-col :span="12">
                    <div>
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>更新说明</span>
                            </div>
                            <div class="text item">
                                <span style="font-weight: bold">
                                    首页（优化）：
                                </span><br/><br/>
                                <span>
                                    1、新增宠物黑/白猫。
                                </span><br/>
                                <span>2、本周打卡时长支持查看往周的打卡记录。</span><br/>
                                <span>3、待办事项只有自己能看到。</span><br/><br/>
                                <span style="font-weight: bold">
                                    打卡模块（优化）：
                                </span><br/><br/>
                                <span>
                                    1、只留一个按钮，打卡后自动提醒是上班还是下班。
                                 </span><br/>
                                <span>
                                    2、按钮按下后会有一段等待时间(5s)，这段时间内不能再次打卡。
                                </span><br/><br/>

                                <span style="font-weight: bold">
                                    打卡记录（新增）：
                                </span><br/><br/>
                                <span>
                                    1、新增个人每日打卡时长日历图。
                                </span><br/>
                                <span>
                                    2、新增当天工作室成员上下班打卡散点图。
                                </span><br/>
                                <span>
                                    3、新增工作室成员总，年，月的打卡时长柱状图。
                                </span><br/><br/>
                                <span style="font-weight: bold">
                                    新增：绩点计算，记住密码功能
                                </span><br/><br/>
                                <span style="font-weight: bold">
                                    其他：
                                </span><br/><br/>
                                <span>
                                    修复更多bug
                                </span>
                            </div>
                        </el-card>
<!--                    <line-chart style="height: 500px;width: 600px"></line-chart>-->
                    </div>
                </el-col>
                <el-col :span="6">
                    <div>
                    <el-card style="width: 90%;margin-bottom: 10px;margin-left: 5%">
                        <div style="width: 200px;display: flex;justify-content: space-between">
                            <el-image
                                    style="width: 48px; height: 48px"
                                    :src="imageUrl"
                                    fit="fill"></el-image>
                            <div style="width: 100px;text-align: center">
                                <div>
                              <span style="color:#9aa89e;font-weight: bold;width: 100px">
                              工作室成员数
                              </span>
                                </div>
                                <div style="margin-top: 5px">
                              <span style="width: 100px;font-weight: bold;margin-top: 5px">
                                {{personCount}}
                              </span>
                                </div>
                            </div>
                        </div>
                    </el-card>
                    <todo-list style="width: 90%"></todo-list>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div>
                        <el-card class="box-card">
                            <div slot="header" style="display: flex;justify-content: space-between">
                                <span>本周打卡时长</span>
                                <el-input-number size="mini" v-model="cnt" controls-position="right" @change="initData"/>
                            </div>
<!--                            <el-table :show-header="false" :data="list">-->
<!--                                <el-table-column -->
<!--                            </el-table>-->
                            <div class="scoll-box">
                                <div v-for="(o,index) in list" :key="index" class="text item">
                                    <div style="display: flex;justify-content: space-between">
                                        <span>{{(index+1)+"："+o.name }}</span>
                                        <span>时长：{{ o.returnTime }}</span>
                                    </div>
                                    <el-progress :text-inside="true" :stroke-width="24" :percentage="o.sum"
                                                 :color="handleStatus(o)" style="margin-top: 5px"></el-progress>
                                </div>
                            </div>
                        </el-card>
                    </div>
                </el-col>
            </el-row>
<!--            <el-row>-->
<!--                <div>-->
<!--                    <object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=000000&amp;up_feetColor=D4B898&amp;up_eyeColor=FFFFFF&amp;up_wheelSpokeColor=000000&amp;up_wheelColor=FFFFFF&amp;up_waterColor=66CDAA&amp;up_earColor=FFFFFF&amp;up_wheelOuterColor=000000&amp;up_snoutColor=FFFFFF&amp;up_bgColor=F5DEB3&amp;up_foodColor=000000&amp;up_wheelCenterColor=000000&amp;up_tailColor=FFFFFF&amp;" width="200" height="160">-->
<!--                        <param name="movie" value="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2E&amp;up_tailColor=E6DEBE&amp;">-->
<!--                        <param name="AllowScriptAccess" value="always">-->
<!--                        <param name="wmode" value="opaque"></object>-->
<!--                </div>-->
<!--            </el-row>-->
        </div>
    </div>
</template>

<script>
    import todoList from '@/components/sys/TodoList/index.vue'
    import lineChart from "./charts/line";
    import axios from "axios" //用axios代替ajax请求接口

    export default {
        name: 'HelloWorld',
        components: {
            todoList, lineChart
        },
        data() {
            return {
                list: [],
                personCount: 0,
                fileList:[],
                cnt:0,
                imageUrl: require("../img/ICT_logo.png")
            }
        },
        computed:{

        },
        mounted() {
            this.initData()
        },
        methods: {
            initData() {
                this.getRequest("/dashBoard/sumtime/"+this.cnt).then(resp => {
                    if (resp) {
                        this.list=[]
                        for (let c of resp) {
                            let sum = 100 * (c.sum / (16 * 60 * 60 * 1000))
                            if (sum > 100) {
                                sum = 100
                            }
                            c.sum = Math.floor(sum * 100) / 100
                            this.list.push(c)
                        }
                    }
                })
                this.getRequest('/dashBoard/personCount').then(resp => {
                    if (resp) {
                        this.personCount = resp
                    }
                })
            },
            handleStatus(o) {
                let sum = o.sum
                if (sum >= 80) {
                    return "#67C23A"
                } else if (sum > 50 && sum < 80) {
                    return "#409EFF"
                } else if (sum > 20 && sum <= 50) {
                    return "#E6A23C"
                } else {
                    return "#F56C6C"
                }
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            test(){
                // console.log(this.fileList)
                // this.$refs.upload.submit();
                const axiosInstance = axios.create({});
                let data = new FormData();
                let userId = JSON.parse(window.sessionStorage.getItem('user')).id
                data.append("file",this.fileList[0].raw);
                data.append("userId",userId);
                axiosInstance({
                    method:'post',
                    url:'/dashBoard/',
                    data:data,
                }).then(resp=>{
                    if (resp){
                        console.log(resp)
                    }
                }).catch(e=>{
                    // console.log(e)
                })
            },
            handleChange(file, fileList) {
                this.fileList = fileList
            },
        }
    }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 100%;
        /*height: 500px;*/
    }
    .scoll-box{
        overflow-y: scroll;
        height: 410px;
    }
    ::-webkit-scrollbar {
        display: none;
    }
</style>
<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
